<template>
  <div class="sheet" >
    <div class="title-bar">
      <div @click="toggle" ref="arrow" class="open-status-icon" >{{arrow}}</div>
      <p @click="toggle" class="sheet-name">{{name}} ({{count}})</p>
      <div class="setting">
        <i class="icon-setting"></i>
      </div>
    </div>
    <transition name="sideup">
      <div class="music-con" v-if="show">
        <div class="music-bar" v-for="(item ,index) in detail" :key="index" @click="showSheetMusic(item.name)">
          <div class="icon-block">
            <img :src="item.info[0].img_url" alt="">
          </div>
          <div class="info-block">
            <p class="music-name">{{item.name}}</p>
            <p class="music-count">{{item.count}}首歌曲</p>
          </div>
          <div class="menu-block" @click.stop="showBottomMenu(item.name)">
            <i class="icon-list-circle"></i>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import store from '../../../store'
  export default {
    name: "music-sheet-bar",
    props:{
      name:{
        type:String,
        default:'未知歌单'
      },
      count:{
        type:String,
        default:0
      },
      detail:{
        type:Array,
        default:{}
      },
      showSheet:{
        type:Boolean,
        default:true
      }
    },
    data(){
      return {
        arrow:">",
        show:true
      }
    },
    methods:{
      toggle(){
        this.show = ! this.show;
        this.$refs.arrow.style.transform = this.show ? 'rotate(90deg)' : 'rotate(0deg)';
      },
      showSheetMusic(name){
        let sheet = {},
            cls = store.getters.getAllSheets;
        //获取相关的sheet
        for(let i=0;i<cls.length;i++){
          let info = cls[i].detail;
          for(let j=0;j<info.length;j++){
            if(info[j].name === name)
              sheet = info[j]
          }
        }
        store.dispatch('set_CurSheetShow',true);
        store.dispatch('set_SheetMusic',sheet);
      },
      showBottomMenu(title){
        store.dispatch('set_bottomMenuShow',true);
        store.dispatch('set_bottomMenuType','sheet');
        store.dispatch('set_bottomMenuTitle','歌单: '+title);
      }
    },
    mounted(){
      this.$refs.arrow.style.transform = this.show ? 'rotate(90deg)' : 'rotate(0deg)';
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../../static/style/public';
  $titleHeight:25px;
  $musicBarHeight:$topHeight + 10px;
  $imgMargin:10px;
  .sheet{
    position:relative;
    overflow: hidden;
    padding-top:$titleHeight;
    width:100%;
    background-color: white;
    .title-bar{
      display: flex;
      position:absolute;
      top:0px;
      left:0px;
      z-index: 100;
      background-color: #e3e3e3;
      width:100%;
      height:$titleHeight;
      line-height: $titleHeight;
      .open-status-icon{
        width:$titleHeight;
        height:$titleHeight;
        text-align: center;
        font-size:16px;
        transition:transform 0.5s;
      }
      .sheet-name{
        padding:0px 10px;
        font-size:12px;
      }
      .setting{
        position:absolute;
        right:$rightMargin;
        width:$titleHeight;
        height:$titleHeight;
      }
    }

    .music-con{
      width:100%;
      background-color: white;
      .music-bar{
        display: flex;
        font-size:14px;
        height:$topHeight + 10px;
        .icon-block{
          @include flex-center;
          width:$musicBarHeight;
          height:$musicBarHeight;
          img{
            width:$musicBarHeight - $imgMargin;
            height:$musicBarHeight - $imgMargin;
          }
        }
        .info-block{
          display: flex;
          position:absolute;
          justify-content: space-around;
          flex-direction: column;
          left:$musicBarHeight;
          right:0px;
          height:$musicBarHeight - 1px;
          border-bottom: 1px solid $lightGrey;

          .music-name{
            font-size:14px;
          }
          .music-count{
            font-size:12px;
            color:#999999;
          }
        }

        .menu-block{
          @include flex-center;
          position:absolute;
          right:0px;
          width:$musicBarHeight;
          height:$musicBarHeight;
          &:active{
            background-color: $lightGrey;
            i{
              color:black;
            }
          }
          i{
            font-size:20px;
            color:$grey;
          }
        }
      }
    }
  }
  .sideup-enter{
    transform: translate3d(0,-100%,0);
  }
  .sideup-enter-active,sideup-leave-active{
    transition:all 1s;
  }
  .sideup-enter-active{
    animation: sideup 1s reverse;
  }
  .sideup-leave-active{
    animation: sideup 1s;
  }
  @keyframes sideup {
    0%{
      transform: translate3d(0,0,0);
    }
    10%{
      transform: translate3d(0,10%,0);
    }
    90%{
      transform: translate3d(0,-110%,0);
    }
    100%{
      transform:translate3d(0,-100%,0);
    }
  }

</style>
